<template>
  <article class="page">
    <headerbar>问题反馈
      <span @click="goFeedback()" class="head-btn" slot="btn">我的反馈</span>
    </headerbar>
    <section class="frame-content-sub no-bg">

      <section class="inner-content pdv-9 pdh-4">

        <div class="input-row-wrap">
          <div class="name">
            <div class="item">
                <i class="img" @click="go('myCommonQuestion')"><img src="../../../../static/images/dangjian/mine/my-commonQuestion.png" alt=""></i>
                <span class="text" @click="go('myCommonQuestion')">常见问题</span>
            </div>
          </div>
          <div class="name">标题：</div>
          <input v-model="form.title" type="text" placeholder="请填写标题">
        </div>

        <div class="input-row-wrap">
          <div class="name">内容：</div>
          <textarea v-model="form.content" placeholder="请填写反馈内容" name="" id="" cols="30" rows="10"></textarea>
        </div>

        <div class="input-row-wrap">
          <div class="mgt-5 color-tip mgb-1"><i class="required color-red">严禁上传或录入涉密内容</i></div>
          <div class="name">附件：</div>
          <section class="upload-wrap">
            <cube-upload ref="upload"
                         action=""
                         accept="image/*"
                         :simultaneous-uploads="1"
                         @files-added="uploadFile"
                         @file-removed="removedFile"
            />
          </section>
        </div>



        <div class="pdv-6"></div>

        <div @click="save()"  class="default-block-btn">{{isSubmiting?'正在提交':'提交'}}</div>

        <div class="pdv-5"></div>
      </section>

    </section>
  </article>
</template>

<script>
  let isSubmiting = false // 正在提交
  export default {
    name: 'demandSurveyFeedback',
    data () {
      return {
        type:true,
        isSubmiting: false,
        form: {
          title: '',
          content: '',
          files: ''
        },
        attachmentList: []
      }
    },
    created () {
      this.tools.alert('红云信箱只接受筑红云平台在管理、使用中遇到的问题以及对改进筑红云平台的意见建议。')
    },
    methods: {
      uploadFile (file) {
        this.type = false
        let uploadFile = file[0]
        let formData = new FormData()
        formData.append('file', uploadFile)
        this.fetchService.o_upload(formData).then((res) => {
          if (res.code !== 0) {
            return this.tools.tip(res.message)
          }
          this.attachmentList.push({'fileId': res.data.fileId, 'fileName': uploadFile.name, 'totalBytes': res.data.totalBytes, 'type': '1'})
          this.type = true
        })
      },
      go (path) {
        this.$router.push({path: path})
      },
      /*删除文件*/
      removedFile (file) {
        let uploadFile = file.file
        let removeIndex = this.attachmentList.findIndex(item => {
          return item.fileName === uploadFile.name
        })
        if(removeIndex < 0) {
          return false
        }
        this.attachmentList.splice(removeIndex, 1)
      },
      save () {
        if (this.form.title === '') {
          return this.tools.tip('请填写标题')
        }
        if (this.form.content === '') {
          return this.tools.tip('请填写反馈内容')
        }
        if(this.type == false){
          return this.tools.tip('文件上传中...')
        }
        this.form.files = ''
        this.attachmentList.map((v) => {
          this.form.files = this.form.files + v.fileId + ','
        })
        if (this.form.files.length > 0) {
          this.form.files = this.form.files.substring(0, this.form.files.length - 1)
        }
        console.log('---------------this.form.files=', this.form.files)
        // 防止重复提交
        if (this.isSubmiting) {
          return false
        }
        // 防止接口返回太慢
        this.isSubmiting = true
        // this.form.files = JSON.stringify(this.attachmentList)
        this.fetchService.suggestAdd(this.form).then(res => {
          this.isSubmiting = false
          if (res.code !== 0) {
            return this.tools.tip(res.message)
          }
          this.tools.alert('提交成功，感谢参与!')
          // this.tools.back()
          this.goFeedback()
        })
      },
      goFeedback () {
        this.$router.push({path: `/myFeedbackList`})
      }
    }
  }
</script>

<style scoped>

</style>
